<template>
  <div class="departments">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first">
          <div class="main">
            <div class="top">
              <div class="title">江苏传智播客教育科技股份有限公司</div>
              <div class="manager">负责人</div>
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>

            <!-- 树形控件 -->
            <el-tree :data="data" :props="{ label: 'name' }">
              <template v-slot="{ data }">
                <div class="top" style="width:100%">
                  <div class="title">{{ data.name }}</div>
                  <div class="manager">{{ data.manager }}</div>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                        <el-dropdown-item>查看部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      data: [
        {
          name: '总裁办',
          manager: '孙财'
        },
        {
          name: '总经理',
          manager: '黄sir'
        },
        {
          name: '人事部',
          manager: '文文',
          children: [
            {
              name: '一把手',
              manager: '晓晓'
            },
            {
              name: '二把手',
              manager: '白白'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scope>
.departments {
  .box-card {
    margin: 20px;
    .top {
      padding: 50px 150px;
      display: flex;
      justify-content: space-between;
      .manager {
        flex: 1;
        text-align: right;
        margin-right: 20px;
      }
    }
  }
}
</style>
